<template>

<!--审核未通过的详情弹窗-->
  <el-dialog
      v-model="dialogVisible"
      title="请输入未通过的详情"
      width="500"
      :before-close="handleClose"
  >
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
    >

      <el-form-item label="">
        <el-input v-model="ruleForm.remark" type="textarea" />
      </el-form-item>
    </el-form>

    <span class="dialog-footer">
    <el-button @click="handleClose()">取 消</el-button>
    <el-button type="primary" @click="tijiao()">确 定</el-button>
  </span>

  </el-dialog>


  <el-form :inline="true" :model="shopForm" class="demo-form-inline">
    <el-form-item label="标题:">
      <el-input @change="show()" v-model="shopForm.title" placeholder="请输入要查询的标题" clearable/>
    </el-form-item>
    <el-form-item label="发布时间:">
      <div class="block">
        <el-date-picker
            v-model="shopForm.publishDateStart"
            type="datetime"
            placeholder="请输入起始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>-
      <div class="block">
        <el-date-picker
            v-model="shopForm.publishDateEnd"
            type="datetime"
            placeholder="请输入结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
    </el-form-item>
    <el-form-item label="类型">
      <el-select
          v-model="shopForm.typeIds"
          multiple
          placeholder="Select"
          style="width: 240px"
      >
        <el-option
            v-for="item in uu"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-button @click="show()" type="primary">查询</el-button>
  </el-form>

  <el-table :data="tableData" style="width: 100%">

    <el-table-column prop="title" label="标题" width="140"/>
    <el-table-column prop="image" label="图片" width="140" >
      <template #default="scope">
        <img v-if="scope.row.images.length == 0" :src="scope.row.image" style="width: 50px;height: 50px"/>
        <img v-if="scope.row.images.length != 0" :src="scope.row.images[0]" style="width: 50px;height: 50px"/>
      </template>
    </el-table-column>
    <el-table-column prop="publishDate" label="发布日期" width="180"/>
    <el-table-column label="类型" width="140" #default="scope">
      <p v-for="index of scope.row.channelNames">
        {{index.name}}
      </p>
    </el-table-column>
    <el-table-column prop="content" label="文字内容" width="140" show-overflow-tooltip/>

    <el-table-column label="操作" width="480">
      <template #default="scope">
        <el-button type="info" @click="selectDetails(scope.row.id)">查看详情</el-button>
        <el-button type="info" @click="shenhetongguo(scope.row.id)">审核通过</el-button>
        <el-button type="warning" @click="weitongguo(scope.row)">审核未通过</el-button>
      </template>

    </el-table-column>

  </el-table>
  <el-pagination
      v-model:current-page="shopForm.pageNum"
      v-model:page-size="shopForm.pageSize"
      :page-sizes="[1, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="shopForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
import {ref, reactive} from "vue";

import {ElMessage} from "element-plus";
import {showUnreviewedFiles,auditFailedFiles,auditSuccessfulFiles,cang} from "../api/files/files.js";
import {channelListJs} from "../api/files/files.js";
import CryptoJS from 'crypto-js';
import router from "../router/index.js";



const shopForm = ref({
  pageNum: 1,
  pageSize: 5,
  total:0,
  title:null,
  publishDateStart:null,
  publishDateEnd:null,
  typeIds:[],
})
const handleSizeChange = (val) => {
  shopForm.value.pageSize = val
  show()
}
const handleCurrentChange = (val) => {
  shopForm.value.pageNum = val
  show()
}
const tableData = ref([])


// 获取token
const token = localStorage.getItem("token");
// 查询全部
function show() {
  showUnreviewedFiles(shopForm.value).then(res => {
    tableData.value = res.data.data.records
    console.log(res.data.data.records)
    shopForm.value.total = parseInt(res.data.data.total)
  })
}
show()
// 添加

const options = ref([])




const rules = reactive({
  shopName: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
    {min: 1, message: '长度最小为1', trigger: 'blur'},
  ],
  business: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
    {min: 1, message: '长度最小为1', trigger: 'blur'},
  ],
})


function shenhetongguo(id) {
  auditSuccessfulFiles(id).then(res=>{
    if(res.data.code==200){
      ElMessage.success("审核通过成功")
      show()
    }else {
      ElMessage.success("审核通过失败")
    }
  })
}


// 上传图片
const imageUrl=ref('')
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  console.log(response)
  ruleForm.value.image = response.data;
  console.log(response)
};


const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!');
    return false;
  }
  return true;
};


// 类型
const uu = ref([])

function leixing() {
  channelListJs().then(res=>{
    if(res.data.code == 200){
      uu.value = res.data.data
    }
  })
}
leixing()

const pp = ref([])
// 仓库查询
function cangku(){
  cang().then(res=>{
    if(res.data.code==200){
      pp.value = res.data.data
    }
  })
}
cangku()
console.log()
// 审核未通过
const ruleForm = ref({})

const dialogVisible = ref(false)



function weitongguo(row) {
  dialogVisible.value = true
  ruleForm.value.id=row.id
}

function tijiao(){
  auditFailedFiles(ruleForm.value).then(res => {
    console.log(ruleForm.value)
    if (res.data.code === 200) {
      ElMessage.success(res.data.errorMessage)
      dialogVisible.value = false
      ruleForm.value = ref({})
      show()
    } else {
      ElMessage.error(res.data.errorMessage)
    }
  })
}
// 查看详情
function selectDetails(val){
  // 加密秘钥
  const secretKey = 'mySecretKey123';
  var valJSON = JSON.stringify(val);
  const encryptedParams = CryptoJS.AES.encrypt(valJSON, secretKey).toString();
  // 路由传参
  router.push({
    path:"/xiangqing",
    query:{
      val:encryptedParams
    }
  })
}


</script>